<template>
  <div>
      <div
        style="padding-top: 20px"
        v-if="showSearch"
        :class="{
          'enter-level flipInX': showSearch,
        }"
      >
        <el-form :inline="true" :model="videolistsearch" class="demo-form-inline">
          <el-row justify="space-around" :gutter="25" style="margin-left:0px;margin-right:0px ">
            <el-col :span="5">
            <el-form-item label="视频编号">
            <el-input
              v-model="videolistsearch.id"
              placeholder="请输入视频编号"
              clearable
            />
          </el-form-item>
          </el-col>
          <el-col :span="5">
          <el-form-item label="发布者">
            <el-input
              v-model="videolistsearch.username"
              placeholder="请输入发布者"
              clearable
            />
          </el-form-item>
          </el-col>
          <el-col :span="5">
          <el-form-item label="视频分类">
            <el-input
              v-model="videolistsearch.type"
              placeholder="如：任嘉伦"
              clearable
            />
          </el-form-item>
          </el-col>
          <el-col :span="5">
          <el-form-item label="视频类型">
            <el-select v-model="videolistsearch.typeId" placeholder="类型" clearable>
              <el-option label="普通" value="0" />
              <el-option label="会员" value="1" />
              <el-option label="金币" value="2" />
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="5"></el-col>
          </el-row>
          <el-row  :gutter="24" style="margin-left:0px;margin-right:0px">
            <el-col :span="10" style="margin-left:2%">
            <el-form-item label="提交时间">
                <div class="block">
                  <el-date-picker
                    v-model="loginTime"
                    placeholder="-"
                    :unlink-panels="true"
                    type="datetimerange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="9" style="margin-left:10%">
            <el-form-item>
              <el-button type="primary" @click="getDataList" :icon="Search">
                搜索
              </el-button>
              <el-button type="info" @click="reset" :icon="Refresh">
                重置
              </el-button>
            </el-form-item>
            </el-col>
            <el-col :span="5"></el-col>
          </el-row>
            </el-form>
      </div>
      <div style="padding: 30px">
        <div
          style="
            display: flex;
            justify-content: space-between;
          "
        >
          <div>
            <el-button :icon="Check" type="primary"
                plain
                @click="open(2,null)"
                :disabled="isBatch"
            >批量审核</el-button>
            <el-button
                :icon="Delete"
                type="danger"
                plain
                @click="removeLog"
                :disabled="isBatch"
            >删除</el-button
            >
          </div>
          <div>
            <el-button
              :icon="Search"
              circle
              @click="showSearch = !showSearch"
            ></el-button>
            <el-button :icon="Refresh" circle @click="reset"></el-button>
          </div>
        </div>
        <el-table
          ref="multipleTableRef"
          :data="dataList"
          style="width:100%;"
          height="600"
          @selection-change="handleSelectionChange"
          v-loading="dataLoding"
          
        >
          <el-table-column align="center" type="selection" :selectable="selectable" width="55" />
          <el-table-column
            property="id"
            label="视频编号"
            width="105"
          />
          <el-table-column #default="scope" label="视频" width="100">
            <el-image :src="scope.row.firstImgUrl"/>
          </el-table-column>
          <el-table-column #default="scope" label="视频类型" width="100">
            <template  v-if="scope.row.type==0"> <el-tag type="info">普通</el-tag></template>
            <template  v-if="scope.row.type==1"><el-tag type="danger">会员</el-tag></template>
            <template  v-if="scope.row.type==2"><el-tag type="waring">金币</el-tag></template>
          </el-table-column>
          <el-table-column property="gold" label="金币" width="105" />
          <el-table-column property="thumbUp" label="点赞量" width="105" />
          <el-table-column property="collection" label="收藏量" width="105"/>
          <el-table-column property="lookCount" label="观看人数" width="105"/>
          <el-table-column  #default="scope" label="状态" width="105">
            <template  v-if="scope.row.status==0"> <el-tag type="waring">未审核</el-tag></template>
          </el-table-column>
          <el-table-column #default="scope" sortable  label="提交时间" width="205">{{tool.formatDateToYYYYMMDD(scope.row.createTime)}}</el-table-column>
          <el-table-column property="userName" label="发布者" width="105" />
          <el-table-column property="typeName" label="分类" width="105"/>
          <el-table-column label="操作" fixed="right" width="250">
            <template #default="scope">
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定要删除吗？"
                @confirm="oneremoveLog(scope.row)"
                @cancel="removeCnacle"
              >
                <template #reference>
                  <el-button type="text" :icon="Delete"> 删除 </el-button>
                </template>
              </el-popconfirm>
              <el-button @click="open(1,scope.row)" type="text" :icon="Check">
                审核
              </el-button>
              <el-button  type="text" :icon="VideoPlay" @click="onPlay(scope.row)">
                播放
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
            :hide-on-single-page="false"
            background
            layout="prev, pager, next"
            :total="pages.total"
            :page-size="videolistsearch.pageSize"
            :page-count="pages.pages"
            @current-change="changePage"
            :pager-count="15"
          />
        </div>
      </div>
      <el-dialog
        v-model="dialogOverflowVisible"
        title="视频审核"
        width="400"
        draggable
        overflow
      >
        <el-form-item label="审核">
            <el-select v-model="status" placeholder="视频类型" clearable>
              <el-option label="通过" value="1" />
              <el-option label="不通过" value="2" />
            </el-select>
        </el-form-item>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="Cancel">取消</el-button>
            <el-button @click="reviewMuset">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog
        v-model="centerDialogVisible"
        width="70%"
        height="100"
        :show-close="false"
        destroy-on-close
        :close="closeVideo"
        center
      >
      <video
        controls="controls"
        width="100%"
        height="600px"
        :poster="video.images"
        >
        <source :src="video.url" type="video/ogg" />
        <source :src="video.url" type="video/mp4" />
      </video>
      </el-dialog>
    </div>
</template>

<script setup>
import tool from "@/assets/js/tool";
  import request from "@/assets/js/request";
  import { ref, onMounted } from "vue";
  import { ElMessage,ElMessageBox  } from "element-plus";
  import {
    Search,
    Refresh,
    Delete,
    Check,
    VideoPlay
  } from "@element-plus/icons-vue";
  
  
  const videolistsearch=ref({
    id:null,
    beginTime:null,
    endTime:null,
    username:'',
    type:'',//分类
    typeId:null,//类型
    idlist:'',
    reviewtype:0,
    pageNum:1,
    pageSize:20
  })
  const dataList=ref([])
  const pages=ref({
    total:0,
    pages:0
  })
  //弹窗
  const dialogOverflowVisible = ref(false)
  //审核意见
  const status=ref()
  //时间区间
  const loginTime=ref()
  const showSearch = ref(true);
  const dataLoding = ref(false);
  //视频播放参数
  const centerDialogVisible=ref(false)
  const video=ref({
    images:'',
    url:''
  })
  // 记录当前批量删除tag的步骤
  const selectable = ref();
  const isBatch = ref(true);
  const selectKey = ref([]);
  
  //确定idlist
  const getIdList=(data)=>{
    if(data.length>0){
      data.forEach(element => {
        videolistsearch.value.idlist=element+','+videolistsearch.value.idlist;
      });
    }
  }
  //打开-弹窗
  const open=(key,data)=>{
    if(key===1){videolistsearch.value.idlist=data.id}
    else if(key===2){getIdList(selectKey.value)}
    dialogOverflowVisible.value=true;
}
//弹窗取消
const Cancel=()=>{
    videolistsearch.value.idlist='';
    dialogOverflowVisible.value=false;
}
//视频播放
const onPlay=(data)=>{
  centerDialogVisible.value=true;
  video.value.images=data.firstImgUrl;
  video.value.url=data.videoUrl;
}
const closeVideo=()=>{
  video.value.images='';
  video.value.url='';
}
//审核请求
const reviewRequest=()=>{
    request
    .post('/admin/video/review?idlist='+videolistsearch.value.idlist+'&status='+status.value)
    .then((res) => {
      if(res.data){
        ElMessage.success('审核成功'); 
      getDataList();
      }else{
        ElMessage.error('审核失败');
      }
    }).catch(err =>{
        ElMessage.error(err.message)
       }
    )
}
//审核确定
const reviewMuset=()=>{
    if(status.value){
        reviewRequest();
    }else{
      ElMessage.error('审核意见不能为空');
    }
    Cancel();
}
  //确定开始和结束时间分开
  const separate=(data)=>{
    if(data)
    {  
      videolistsearch.value.beginTime=data[0];
      videolistsearch.value.endTime=data[1]; 
    }
  }
  //获取数据
  const getDataList=()=>{
    dataLoding.value = true;
    getIdList(selectKey.value);
    separate(loginTime);
    request
    .post('/admin/video/page',videolistsearch.value)
    .then((res) => {
      if(res.code===200){
          dataList.value=res.data.list;
          pages.value.total=res.data.total;
          pages.value.pages=res.data.pages;
        }else {
          ElMessage.error(res.msg);
        }
        dataLoding.value = false;
    }).catch(err =>{
      ElMessage.error(err.message);
       }
    )
    setTimeout(() => {
      dataLoding.value = false;
    }, 5000);
  }
  //换页
  const changePage = (pageIndex) => {
    videolistsearch.value.pageNum = pageIndex;
    getDataList();
  };
  //删除请求
  const removeRequest=()=>{
    console.log('发送：'+videolistsearch.value.idlist); 
    request.post(`/admin/video/del?idlist=`+videolistsearch.value.idlist).then((res) => {
      if(res.code===200){
        ElMessage.success('删除成功');
      }else{
        ElMessage.error('删除失败');
      }
      getDataList();
    }).catch(err =>{
      ElMessage.error(err.message);
       }
    )
    selectKey.value=[] 
  }
  //批量删除事件
  const removeLog=()=>{    
    getIdList(selectKey.value)    
    ElMessageBox.confirm(
      '确定删除所选项?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
        removeRequest();
      }).catch(() => {
        selectKey.value=[]
        videolistsearch.value.idlist=''
      })
      
  }
  //单删确定
  const oneremoveLog=(data)=>{
    videolistsearch.value.idlist=data.id;
    removeRequest();
    getDataList();
  }
  //单删取消
  const removeCnacle=()=>{    
    videolistsearch.value.idlist='';
  }
  const reset = () => {
    loginTime.value='';
    videolistsearch.value={
      id:null,
      beginTime:null,
      endTime:null,
      username:'',
      type:'',//分类
      typeId:null,//类型
      idlist:'',
      reviewtype:0,
      pageNum:1,
      pageSize:20
    }
    getDataList(); 
  };
  
  // 多选
  const handleSelectionChange = (val) => {
    console.log(val);
    let arr = val.map((item) => item.id);
    selectKey.value = arr;
    if (selectKey.value.length > 0) {
      isBatch.value = false;
    } else {
      isBatch.value = true;
    }
  };
  
  onMounted(() => {
    getDataList();
  });
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
  }
  
  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  
  .el-form-item__label {
    font-weight: bold;
  }
  
  .el-form {
    display: inline;
  }
  
  .activeTag {
    background: #fef0f0;
    border: #fde2e2 1px solid;
    color: #f67777;
  }
  .el-input {
      position: relative;
      display: inline-block;
      width: 220px;
  }
</style>